<template>
	<div id="app">
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
		<div 
			class="loading-popup"
			v-show="isLoading"
		>
			<div class="content">
				<van-loading 
					type="spinner"
					color="#1989fa"
					vertical
				>加载中...</van-loading>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	name: 'App',
	computed:{
		...mapState({
			isLoading:state=>state.home.isLoading
		})
	},
	beforeCreate(){
		this.$store.commit("home/changeLoadingStatus",false)
	}
}
</script>

<style lang="scss" scoped>
@import "./assets/style/variable.scss";
.loading-popup{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0);
	z-index: 9999;
	@include flexCenter;
	transition: all ease .3s;
}
</style>
